<template>
    <view class="container">
      <!-- 使用 v-for 循环渲染所有的视频 -->
      <view class="box" v-for="(item, index) in boxes" :key="index" @click="openPreview(item)">
        <video :src="item" class="box-video" controls muted></video>
      </view>
  
      <!-- 弹出预览窗口 -->
      <view v-if="isPreviewVisible" class="preview-overlay" @click="closePreview">
        <video :src="currentPreviewVideo" class="preview-video" controls autoplay></video>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        boxes: [
          '/static/video/hushi.mp4',
          '/static/video/hushi.mp4'
        ],
        // 控制预览的显示
        isPreviewVisible: false,
        currentPreviewVideo: '', // 当前预览的视频地址
      };
    },
    methods: {
      // 打开预览
      openPreview(videoUrl) {
        this.currentPreviewVideo = videoUrl;
        this.isPreviewVisible = true;
      },
      // 关闭预览
      closePreview() {
        this.isPreviewVisible = false;
        this.currentPreviewVideo = '';
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 一行三个盒子 */
    gap: 15px; /* 盒子之间的间距 */
    padding: 20px; /* 容器内边距 */
  }
  
  .box {
    height: 150px; /* 盒子高度 */
    overflow: hidden; /* 防止视频超出盒子 */
    border-radius: 15px; /* 圆角边框 */
    box-shadow: 5px 5px 10px rgba(2, 1, 6, 0.941); /* 阴影效果 */
    cursor: pointer; /* 鼠标指针 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .box-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持视频比例，裁切多余部分 */
  }
  
  .preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* 铺满全屏 */
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .preview-video {
    border-radius: 10px;
    width: 96%; /* 最大宽度设置为视窗的90% */
    height: 60%; /* 最大高度设置为视窗的90% */
    object-fit: contain; /* 保持视频原始比例 */
  }
  </style>
  